<template>
  <!-- 列表展示滚动 -->
  <div class="noticeContent">
    <ul
      class="notice_list"
      :class="noticeList.length > 3 ? { notice_top: animate } : ''"
    >
      <li
        v-for="(item, index) in noticeList"
        :key="index"
        @click="detail(item)"
      >
        {{ item.content }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    // 展示的数据
    noticeList: {
      type: Array,
      default: () => {
        return [];
      },
      required: true,
    },
  },
  data() {
    return {
      animate: false,
      time: "", //计时器
      setTime: "", //定时器
    };
  },
  created() {
    // 页面显示
    let t = this;
    if (t.noticeList.length > 3) {
      t.time = setInterval(() => {
        t.showNotice();
      }, 3000);
    }
  },
  beforeDestroy() {
    clearInterval(this.time);
    clearTimeout(this.setTime);
  },
  methods: {
    /**
     * 滚动事件
     * */
    showNotice() {
      let t = this;
      t.animate = true;
      t.setTime = setTimeout(() => {
        t.noticeList.push(t.noticeList[0]);
        t.noticeList.shift();
        t.animate = false;
      }, 1500);
    },
    /**
     * 点击获取详情，返回信息给父组件
     */
    detail(item) {
      this.$emit("click", item);
    },
  },
};
</script>
<style scoped lang='less'>
.noticeContent {
  margin-top: 10px;
  display: block;
  position: relative;
  width: 100%;
  height: 60px; // 控制高度以达到控制显示条数的目的
  overflow: hidden;
  border-top: 1px solid #ece6ed;
  border-bottom: 1px solid #ece6ed;
}
.noticeContent li {
  text-align: left;
  line-height: 20px;
  height: 20px;
  font-size: 12px;
  color: red;
}
.notice_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.notice_top {
  transition: all 0.5s;
  margin-top: -20px;
}
</style>